<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item label="课程" prop="courseId">
                <el-select
                    v-model="queryParams.courseId"
                    placeholder="请选择课程"
                    clearable
                    filterable
                    size="small"
                    style="width: 180px">
                    <el-option
                        v-for="dict in courseOption"
                        :key="dict.id"
                        :label="dict.courseName"
                        :value="dict.id"
                    />
                </el-select>
            </el-form-item>  
            <el-form-item label="班级" prop="classId">
                <el-select
                    v-model="queryParams.classId"
                    placeholder="请选择班级"
                    clearable
                    filterable 
                    size="small"
                    style="width: 180px">
                    <el-option
                        v-for="dict in classOption"
                        :key="dict.id"
                        :label="dict.className"
                        :value="dict.id"
                    />
                </el-select>
            </el-form-item> 
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>        
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
            >新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                type="warning"
                icon="el-icon-download"
                size="mini"
                :disabled="single" 
                @click="handleSingleExport"
            >导出</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                type="danger"
                icon="el-icon-download"
                size="mini"
                @click="handleMultipleExport"
            >导出</el-button>
            </el-col>
        </el-row>
        <el-table v-loading="loading" :data="clsPracticeList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40" align="center" />
            <el-table-column label="序号" align="center" prop="id" width="60px"/>
            <el-table-column label="课程" align="center" :formatter="courseFormat" :show-overflow-tooltip="true" />
            <el-table-column label="章节名称" align="center" prop="sectionName" :show-overflow-tooltip="true" width="180px"/>
            <el-table-column label="班级" align="center" :formatter="classFormat" :show-overflow-tooltip="true" />
            <el-table-column label="习题内容" align="center" prop="practiceContent" :show-overflow-tooltip="true"/>
            <el-table-column label="完成人数" align="center" prop="pass" :show-overflow-tooltip="true"/>
            <el-table-column label="未完成人数" align="center" prop="notPass" :show-overflow-tooltip="true"/>
            <el-table-column label="完成率" align="center" prop="passRate" :show-overflow-tooltip="true"/>
            <el-table-column label="创建时间" align="center" prop="createTime" width="160px">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="180" >
                <template slot-scope="scope">
                <!-- <el-button
                    size="mini"
                    circle type="info"
                    icon="el-icon-view"
                    @click="handleView(scope.row,scope.index)"
                /> -->
                <el-button
                    size="mini"
                    circle type="success"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                />
                <el-button
                    size="mini"
                    circle type="info"
                    icon="el-icon-edit-outline"
                    @click="handleEnterResult(scope.row)"
                />
                </template>
            </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
    />

    <el-dialog :title="title" :visible.sync="open" width="30%">
        <el-form :model="form" ref="form" :rules="rules" label-width="100px">
            <el-form-item label="课程" prop="courseId">
                <el-select
                    v-model="form.courseId"
                    placeholder="请选择课程"
                    filterable
                    clearable
                    size="small"
                    style="width:100%"
                    :disabled="disabled"
                    @change="selectCourse"
                >
                <el-option
                    v-for="item in courseOption"
                    :key="item.id"
                    :label="item.courseName"
                    :value="item.id"
                >
                </el-option>
                </el-select> 
            </el-form-item>
            <el-form-item label="章节" prop="sectionId">
                <el-select
                    v-model="form.sectionId"
                    placeholder="请选择章节"
                    filterable
                    clearable
                    size="small"
                    style="width:100%"
                    :disabled="disabled"
                    @change="changeSection"
                >
                <el-option
                    v-for="item in sectionOptions"
                    :key="item.id"
                    :label="item.courseSection"
                    :value="item.id"
                >
                </el-option>
                </el-select> 
            </el-form-item>

            <el-form-item label="班级" prop="classId">
                <el-select
                    v-model="form.classId"
                    placeholder="请选择班级"
                    filterable
                    clearable
                    size="small"
                    style="width:100%"
                    :disabled="disabled"
                >
                <el-option
                    v-for="item in classOption"
                    :key="item.id"
                    :label="item.className"
                    :value="item.id"
                >
                </el-option>
                </el-select> 
            </el-form-item>
            <el-form-item label="习题内容" prop="practiceContent">
                <el-input v-model="form.practiceContent" 
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 20}"
                placeholder="请输入习题内容"/>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="resultOpen" width="60%">
      <el-form ref="resultForm" :model="resultForm" :rules="resultRules" label-width="100px">
        <el-form-item label="考试名单:">
          <el-table :data="resultForm.clsPracticeResults">
            <el-table-column label="序号" align="center" type="index" />
            <el-table-column label="学号" align="center" prop="studentNo" />
            <el-table-column label="学生姓名" align="center" prop="studentName"/>
            <!-- <el-table-column label="完成数量" align="center" prop="finishNum">
                <template slot-scope="scope">
                    <el-input
                    v-model="scope.row.finishNum"
                    placeholder="完成数量"
                    ></el-input>
                </template>
            </el-table-column> -->
            <!-- <el-table-column label="是否缺考" align="center" prop="isMiss">
              <template slot-scope="scope">
                <el-radio v-model="scope.row.isMiss" label="0">缺考</el-radio>
                <el-radio v-model="scope.row.isMiss" label="1">应考</el-radio>
              </template>
            </el-table-column> -->
            <el-table-column label="是否完成" align="center" prop="isPass">
              <template slot-scope="scope">
                <el-radio v-model="scope.row.isPass" label="0">未完成</el-radio>
                <el-radio v-model="scope.row.isPass" label="1">完成</el-radio>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitResultForm">确 定</el-button> 
        <el-button @click="resultOpen = false">取 消</el-button> 
      </div>
    </el-dialog>
    </div>
</template>

<script>

import { listAllBClass } from "@/api/basedata/bclass";
import { findAllCourse } from "@/api/basedata/bcourse";
import { findPageList,findListByClsPracticeByInfoId,createOrUpdate,enterClsPracticeResult,exportSingleClsPractice,exportMultipleClsPractice } from '@/api/academic/clsPractice';

export default {
    name: "BClass", 
    data(){
        return{
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 弹出层标题
            title: "",
            // 是否禁用
            disabled:false,
            // 是否显示弹出层
            open: false,
            // table数据
            clsPracticeList:[],
            // 班级数据字典
            classOption:[],
            // 课程学期数据字典
            courseOption:[],
            sectionOptions: [],
            courseItem: {},
            // 单个选中导出数据
            exportSingleData:{
                id:undefined,
                classId:undefined,
                courseId:undefined,
            },
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                courseName: undefined,
                courseTerm: undefined,
            },
            // 表单参数
            form: {}, 
            rules:{
                clsPracticeName:[
                    { required: true, message: "上机名称必填", trigger: "blur" }
                ],
                courseId:[
                    { required: true, message: "课程必填", trigger: "blur" }
                ],
                sectionId:[
                    { required: true, message: "章节必填", trigger: "blur" }
                ],   
                classId:[
                    { required: true, message: "班级必填", trigger: "blur" }
                ], 
                practiceContent:[
                { required: true, message: "习题内容必填", trigger: "blur" }
                //     { validator:function(rule,value,callback){
                //         if(/^[0-9]*$/.test(value) == false){
                //             callback(new Error("请输入正确的数字"));
                //         }else{
                //             callback();
                //         }
                //     }, trigger: 'blur'
                // },
                ]              
            },
            resultOpen:false,
            resultForm:{
                clsPracticeResults:[]
            },
            resultRules:{}
        }
    },

    created(){
        this.getList();
        this.getClassList();
        this.getCourseList();
    },
    methods:{
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.exportSingleData = selection[0];
            this.single = !(selection.length === 1)
        },
        getList(){
            this.loading = true;
            findPageList(this.queryParams).then(response => {
                this.clsPracticeList = response.data.list;
                this.total = response.data.total;
                this.loading = false;
            });
        },
        changeSection(value) {
            this.form.sectionId = value;
            this.$forceUpdate()    
        },
        getClassList(){
            listAllBClass().then((result) => {
                this.classOption = result.data
            }).catch((err) => {
                
            });
        },
        getCourseList(){
            findAllCourse().then((result) => {
                this.courseOption = result.data
            }).catch((err) => {
                
            });
        },
        courseFormat(row, column) {
            for(let i = 0; i < this.courseOption.length; i++){
                if(row.courseId == this.courseOption[i].id){
                    return this.courseOption[i].courseName
                }
            }
        },
        classFormat(row,column){
            for(let i = 0; i < this.classOption.length; i++){
                if(row.classId == this.classOption[i].id){
                    return this.classOption[i].className
                }
            }
        },
        selectCourse(value) {
            this.form.sectionId = undefined;
        this.courseItem = this.courseOption.find(function (item) {
            return item.id == value;
        });
            this.sectionOptions = this.courseItem.sectionList;
            this.$forceUpdate() 
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        }, 
        reset() {
            this.form = {
                courseId:null,
                courseName:null,
                practiceContent:null
            };
            this.resetForm("form");
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        handleAdd(){
            this.title = "新增"
            this.disabled = false
            this.open = true;
            this.reset()
        },
        //导出单条上机成绩表
        handleSingleExport(){
            var className;
            for(let i = 0; i < this.classOption.length; i++){
                if(this.exportSingleData.classId == this.classOption[i].id){
                    className = this.classOption[i].className
                }
            }
            var courseName;;
            for(let i = 0; i < this.courseOption.length; i++){
                if(this.exportSingleData.courseId == this.courseOption[i].id){
                    courseName = this.courseOption[i].courseName
                }
            }
            var that = this
            this.$confirm("是否确认导出" + className + "班-" + courseName + "上机成绩?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
                }).then(function() {
                    return exportSingleClsPractice(that.exportSingleData.id);
                }).then(response => {
                    this.fileDownload(response.data, className + courseName + "上机成绩表.xlsx");
                }).catch(function() {

                }
            );
        },
        
        //导出多条上机成绩表
        handleMultipleExport(){
            const queryParams = this.queryParams;
            this.$confirm("是否确认导出上机成绩?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
                }).then(function() {
                    console.log(queryParams);
                    console.log(111);
                    return exportMultipleClsPractice(queryParams);
                }).then(response => {
                    this.fileDownload(response.data, "上机成绩表.xlsx");
                }).catch(function() {

                }
            );
        },
        handleUpdate(row){
            this.title = "修改"
            this.disabled = true
            this.open = true;
            this.form = row
        },

        //上机信息新增或修改提交
        submitForm:function(){
            console.log(this.form)
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    createOrUpdate(this.form).then((resp) => {
                        this.msgSuccess("提交成功");
                        this.open = false;
                        this.getList();
                    });
                }
            });
        },

        //录入成绩
        handleEnterResult(row){
            this.resultOpen = true;
            this.title = "上机成绩录入"
            this.resultForm.clsPracticeResults = [];
            findListByClsPracticeByInfoId(row.id).then((resp) => {
                // for (let i = 0; i < resp.data.length; i++) {
                //     resp.data[i].isPass = 1
                //     resp.data[i].isMiss = 1
                // }
                this.resultForm.clsPracticeResults = resp.data
            })
        },

        //录入上机成绩提交
        submitResultForm:function(){
            // this.$refs["form"].validate((valid) => {
            //     if (valid) {
            // console.log(this.resultForm)
            enterClsPracticeResult(this.resultForm.clsPracticeResults).then(resp => {
                this.msgSuccess("提交成功");
                this.resultOpen = false;
                this.getList();
            }).catch(err => {
            });
                // }
            // });
        },
    }
}
</script>

<style>

</style>